<template>
  <van-swipe-cell
    style="border-radius: 16px; box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08)"
  >
    <div class="outfit-card-content">
      <div
        class="outfit-preview-section"
        @click.stop="handleOutfitPreviewClick"
      >
        <img
          :src="
            outfitPreviewImage || '/src/assets/icons/outfit-placeholder.svg'
          "
          alt="搭配完成图"
          class="outfit-preview-image"
        />
      </div>
      <div class="outfit-photo-section" @click.stop="triggerFileUpload">
        <div v-if="photoUrl">
          <img
            :src="photoUrl || '/src/assets/icons/photo-placeholder.svg'"
            alt="穿搭照"
            class="outfit-photo-image"
          />
        </div>
        <div class="upload-overlay" v-if="!photoUrl">
          <div class="camera-icon">
            <img src="/src/assets/icons/selfie.png" alt="相机图标" />
          </div>
          <p class="upload-text">点击上传我的穿搭照</p>
        </div>
        <input
          ref="fileInput"
          type="file"
          accept="image/*"
          style="display: none"
          @change="handleFileSelect"
        />
      </div>
    </div>
    <template #right>
      <van-button
        square
        type="danger"
        text="删除"
        class="delete-button"
        right-width="80px"
        @click.stop="handleDeleteClick"
      />
    </template>
  </van-swipe-cell>
</template>

<script setup>
import { ref, defineEmits, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";

// 定义属性
const props = defineProps({
  outfitPreviewImage: {
    type: String,
    default: "",
  },
  outfitId: {
    type: String,
    default: "",
  },
  // 穿搭照URL
  photoUrl: {
    type: String,
    default: "",
  },
});

// 定义事件
const emit = defineEmits(["photo-upload", "delete"]);

// 文件输入引用
const fileInput = ref(null);
const cardWrapper = ref(null);
const router = useRouter();

// 滑动相关状态
const translateX = ref(0);
const startX = ref(0);
const currentX = ref(0);
const isSliding = ref(false);
const deleteButtonWidth = 80; // 删除按钮宽度
const initialTranslateX = ref(0); // 保存初始translateX值

// 触摸开始事件
const handleTouchStart = (e) => {
  startX.value = e.touches[0].clientX;
  currentX.value = startX.value;
  initialTranslateX.value = translateX.value;
  isSliding.value = true;
};

// 触摸移动事件
const handleTouchMove = (e) => {
  if (!isSliding.value) return;

  currentX.value = e.touches[0].clientX;
  const diffX = currentX.value - startX.value;

  // 计算新的位置，确保在有效范围内：只允许向左滑动（负值），最大滑动距离为删除按钮宽度
  const newTranslateX = Math.max(
    -deleteButtonWidth,
    Math.min(0, initialTranslateX.value + diffX)
  );
  translateX.value = newTranslateX;
};

// 触摸结束事件
const handleTouchEnd = () => {
  isSliding.value = false;

  // 添加速度检测，使滑动体验更自然
  const velocity = currentX.value - startX.value;

  // 如果滑动速度足够快或者滑动距离超过一半，则完全展开（显示删除按钮）
  if (translateX.value < -deleteButtonWidth / 2 || velocity < -30) {
    translateX.value = -deleteButtonWidth; // 完全展开，显示删除按钮
  } else if (translateX.value > -deleteButtonWidth / 2 || velocity > 30) {
    // 否则关闭（隐藏删除按钮）
    translateX.value = 0; // 回到初始位置
  }
};

// 处理删除
const handleDelete = () => {
  // 触发删除事件
  emit("delete", props.outfitId);
};

// 点击卡片外部关闭滑动
const handleClickOutside = (e) => {
  if (
    cardWrapper.value &&
    !cardWrapper.value.contains(e.target) &&
    translateX.value < 0
  ) {
    translateX.value = 0;
  }
};

onMounted(() => {
  document.addEventListener("click", handleClickOutside);
});

// 组件卸载时清理事件监听
onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside);
});

// 处理搭配预览点击，跳转到详情页
const handleOutfitPreviewClick = () => {
  if (props.outfitId) {
    router.push(`/outfits/${props.outfitId}`);
  } else {
    // 如果没有outfitId，可以导航到创建搭配页面
    router.push("/create-outfit");
  }
};

// 触发文件上传
const triggerFileUpload = () => {
  if (fileInput.value) {
    fileInput.value.click();
  }
};

// 处理文件选择
const handleFileSelect = (event) => {
  console.log(event);

  const file = event.target.files[0];
  if (file) {
    // 发送文件上传事件给父组件
    emit("photo-upload", props.outfitId, file);

    // 重置文件输入，以便可以重新选择同一文件
    event.target.value = "";
  }
};

// 处理删除点击事件，阻止事件冒泡
const handleDeleteClick = (e) => {
  e.stopPropagation();
  emit("delete", props.outfitId);
};
</script>

<style scoped>
.outfit-card-content {
  display: flex;
}
.outfit-card-wrapper {
  height: 300px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background-color: white;
}

/* 可滑动的内部容器 */
.sliding-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 主内容区域，占据整个卡片宽度 */
.outfit-content {
  display: flex;
  background: white;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  overflow: hidden;
}

/* 删除按钮，固定宽度80px */
.delete-button {
  height: 100%;
  background-color: #ff4757;
  /* border-radius: 0 16px 16px 0; */
}

/* .delete-button {
  width: 80px;
  background-color: #ff4757;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.delete-button svg {
  margin-bottom: 8px;
}

.delete-button span {
  font-size: 14px;
  font-weight: 500;
} */

.outfit-preview-section {
  /* flex: 1; */
  width: 50%;
  position: relative;
  cursor: pointer;
  /* 设置4:3比例的高度（宽度的75%） */
  height: 0;
  padding-bottom: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  overflow: hidden;
}

.outfit-preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  top: 0;
  left: 0;
}

.outfit-photo-section {
  width: 50%;
  position: relative;
  cursor: pointer;
  /* 设置4:3比例的高度（宽度的75%） */
  height: 0;
  padding-bottom: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  /* border-left: 1px solid #f0f0f0; */
  overflow: hidden;
}

.outfit-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.upload-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.camera-icon {
  margin-bottom: 16px;
  height: 70%;
}

.camera-icon img {
  height: 100%;
  opacity: 0.6;
}

.upload-text {
  color: #999;
  margin: 0;
  font-size: 12px;
}

/* 悬停效果 */
/* .outfit-preview-section:hover {
  opacity: 0.95;
}

.outfit-photo-section:hover .camera-icon img {
  opacity: 0.8;
} */

.outfit-photo-section:hover .upload-text {
  color: #666;
}
</style>
